<template>
    <qf-Table :columns="columns" :tableData="tableData" :tableLoading="tableLoading">
        <!-- 产品图片 -->
        <template v-slot:orderDetail[0].imageUrl="{row}">
            <img :src="row.orderDetail[0].imageUrl" width="100" alt="">
        </template>
        <!-- 操作按钮 -->
        <template v-slot:action="{row}">
            <el-button size="small" type="primary" 
            :disabled="row.order_status===4 || row.pay_status === 1" @click="pay(row)">去支付</el-button>
            <el-button size="small" type="danger" @click="del(row)">删除</el-button>
        </template>
        <!-- 支付状态 -->
        <template v-slot:pay_status="{row}">
            {{row.pay_status===0?"未支付":"已支付"}}
        </template>
         <!-- 订单状态 -->
         <template v-slot:order_status="{row}">
            {{orderStatus(row)}}
        </template>
   </qf-Table>
</template>
<script setup>
import { ElMessage,ElMessageBox } from 'element-plus'
import qfTable from "@/components/qfTable/index.vue"
// 引入发送请求的方法
import * as api from "@/api/pay"
import {ref} from "vue"
import {useRouter} from "vue-router"
import { roleTypes } from "element-plus";
let router = useRouter()
// 定义表格的表头
let columns=ref([
    {
        label:"产品图片",
        prop:"orderDetail[0].imageUrl",
    },
    {
        label:"订单编号",
        prop:"order_id"
    },
    {
        label:"产品名称",
        prop:"orderDetail[0].productName"
    },
    {
        label:"数量",
        prop:"orderDetail[0].quantity",
        width:"70px"
    },
    {
        label:"总价格",
        prop:"total_fee"
    },
    {
        label:"创建时间",
        prop:"create_time"
    },
    {
        label:"支付状态",
        prop:"pay_status"
    },
    {
        label:"订单状态",
        prop:"order_status"
    },
    {
        label:"操作",
        prop:"action"
    }
])
// 表格数据
let tableData = ref([])
// 请求数据

// 声明loading加载动画
let tableLoading = ref(false)
let getList = async()=>{
    tableLoading.value=true;
    try{
        // 获取订单
        let res = await api.getOrderApi()
        console.log(res);
        tableData.value = res.data.data.reverse()
        // console.log(tableData.value);
        tableLoading.value=false;
    }catch(e){
        console.log(e);
        tableLoading.value=false;
    }
}
getList()
// 订单状态
// 0：未提交 1：提交成功 2：已经取消 3：无效订单 4：交易关闭 5：退货
let orderStatus=((row)=>{
    switch(row.order_status){
        case 0:
            return '未提交'
        case 1:
            return '提交成功'
        case 2:
            return '已经取消'
        case 3:
            return '无效订单'
        case 4:
            return '交易关闭'
        case 5:
            return '退货'
    }
})
// 去支付
let pay = (row)=>{
    console.log(row);
    // 调转到支付页面，通过query携带当前的order_id
    router.push('/pay/payment?order_id='+row.order_id)
}
//删除订单
let del = async (row) => {
    ElMessageBox.confirm('此操作将永久删除 ' + row.order_id + ', 是否继续?', '删除提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',

        })
        .then(async () => {
            //2.发请求,删除数据
            try {
                let res = await api.delOrderApi(row.order_id)
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                getList()
            } catch (e) {
                ElMessage({
                    type: 'error',
                    message: e.toString()
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '已取消删除'
            })
        })

}
</script>
<script>
export default {
    meta: {
        title: 'order', 
        name: '订单管理',
        routeName: "order",
        icon:"#icon-dd"
    }
}</script>
